<script setup>
import {reactive, watch} from "vue";
import {taskStore} from '@pi/task';

let task = taskStore();
let props = defineProps({
    show: {type: Boolean, default: false},
    id: {type: Number, default: 0}
});
let options = reactive({pageNo: 1, pageSize: 10});
let state = reactive([
    {label: '未打卡', value: 0},
    {label: '已打卡', value: 1},
    {label: '请假', value: 2},
    {label: '缺勤', value: 3},
])

watch(() => props.show, e => {
    if (e) {
        options.pageNo = 1;
        options.state = 0;
        options.id = props.id;
        task.getInfo(options);
    }
}, {immediate: true});

// 下载假条
function download(url) {
    window.open(url)
}
</script>

<template>
    <h5 class="title">考勤详情</h5>
    <div class="btn">
        <el-select v-model="options.state" size="small" @change="task.getInfo(options)" style="width: 120px">
            <el-option v-for="item in state" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </div>
    <el-table :data="task.infoList" style="height: calc(100% - 100px)" size="small" border stripe show-overflow-tooltip>
        <el-table-column prop="id" label="编号" align="center" />
        <el-table-column prop="user.nickname" label="姓名" align="center" />
        <el-table-column prop="user.building.label" label="楼号" align="center" />
        <el-table-column prop="user.chamber.label" label="寝室号" align="center" />
        <el-table-column prop="user.phone" label="手机号" align="center" />
        <el-table-column prop="time" label="打卡时间" align="center" v-if="options.state === 1" />
        <el-table-column label="假条" align="center" v-if="options.state === 2">
            <template #default="{row}">
                <el-button type="primary" link icon="Download" @click="download(row.excuse)">查看假条</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="task.infoTotal" small @current-change="task.getInfo(options)" v-model:current-page="options.pageNo" :page-size="options.pageSize" />
    </div>
</template>

<style scoped lang="less">

</style>